import { FC, PropsWithChildren, useEffect, useRef } from 'react';
import Snap from 'snapsvg-cjs-ts';
import styles from './index.module.scss';
import $ from 'jquery';

/** svg绘制标尺 */
function drawRuler(rulerVEl: SVGSVGElement, rulerHEl: SVGSVGElement) {
  // 绘制标尺[横]
  const r = Snap(rulerVEl);
  // 绘制标尺[竖]
  const rh = Snap(rulerHEl);
  r.line(25, 0, 25, 25).attr({
    stroke: '#8f9292',
    strokeWidth: 1,
  });
  rh.line(0, 25, 25, 25).attr({
    stroke: '#8f9292',
    strokeWidth: 1,
  });
  for (let i = 1; i < 100; i++) {
    // 绘制横标尺(大)
    r.line(80 * i + 25, 0, 80 * i + 25, 25).attr({
      stroke: '#8f9292',
      strokeWidth: 1,
    });
    // 绘制横标尺(小)
    for (let j = i * 4; j < (i + 1) * 4; j++) {
      r.line(20 * j + 25, 15, 20 * j + 25, 25).attr({
        stroke: '#8f9292',
        strokeWidth: 1,
      });
    }
    const text = 80 * i;
    r.text(80 * i + 25 + 2, 12.5, text).attr({
      fill: '#b1b4b4',
    });
    // 绘制竖标尺(大)
    rh.line(0, 80 * i + 25, 25, 80 * i + 25).attr({
      stroke: '#8f9292',
      strokeWidth: 1,
    });
    // 绘制竖标尺(小)
    for (let j = i * 4; j < (i + 1) * 4; j++) {
      rh.line(15, 20 * i + 25, 25, 20 * i + 25).attr({
        stroke: '#8f9292',
        strokeWidth: 1,
      });
    }
    const texth = 80 * i;
    const ruletext = rh.text(0, 80 * i + 25 + 4, texth).attr({
      fill: '#b1b4b4',
    });
    // 旋转文字
    const matrix = Snap.matrix();
    matrix.rotate(90, 2, 80 * i + 25 + 4);
    ruletext.transform(matrix.toTransformString());
  }
}
/** svg绘制背景网格 */
function drawGrid(gridEl: SVGSVGElement) {
  const svg = Snap(gridEl);
  // 绘制80大方格
  for (let i = 1; i < 50; i++) {
    svg.line(0, 80 * i, 2000, 80 * i).attr({
      stroke: '#f0ebdc',
      strokeWidth: 1.5,
    });
    svg.line(80 * i, 0, 80 * i, 2000).attr({
      stroke: '#f0ebdc',
      strokeWidth: 1.5,
    });
  }
  // 绘制20小方格
  for (let i = 1; i < 100; i++) {
    svg.line(0, 20 * i, 2000, 20 * i).attr({
      stroke: '#f5f0e0',
      strokeWidth: 1,
    });
    svg.line(20 * i, 0, 20 * i, 2000).attr({
      stroke: '#f5f0e0',
      strokeWidth: 1,
    });
  }
}

/** 绘制标尺和网格 */
function draw(rulerVEl: SVGSVGElement, rulerHEl: SVGSVGElement, gridEl: SVGSVGElement) {
  drawRuler(rulerVEl, rulerHEl);
  drawGrid(gridEl);
}
/** 重置svg容器 */
function reset(rulerVEl: SVGSVGElement, rulerHEl: SVGSVGElement, gridEl: SVGSVGElement) {
  $([rulerVEl, rulerHEl, gridEl]).empty();
}

export const SvgRuler: FC<PropsWithChildren<{}>> = (props) => {
  const rulerVElRef = useRef<SVGSVGElement>(null);
  const rulerHElRef = useRef<SVGSVGElement>(null);
  const gridElRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    if ([rulerVElRef, rulerHElRef, gridElRef].some((ref) => ref.current === null)) return;
    const [rulerVEl, rulerHEl, gridEl] = [rulerVElRef, rulerHElRef, gridElRef].map((e) => e.current);
    if (!(rulerVEl && rulerHEl && gridEl)) return;
    draw(rulerVEl, rulerHEl, gridEl);
    return () => reset(rulerVEl, rulerHEl, gridEl);
  }, []);


  return (
    <>
      <div className={styles.wrapper}>
        {/* 横标尺 */}
        <svg id="ruler-v" ref={rulerVElRef} className={styles['ruler-v']} />
        {/* 竖标尺 */}
        <svg id="ruler-h" ref={rulerHElRef} className={styles['ruler-h']} />
        {/* 网格背景 */}
        <svg id="grid" ref={gridElRef} className={styles.grid} />
        <div className={styles.content}>
          {props.children}
        </div>
      </div>
    </>
  );
};
